//*******************
//Class GeneralEditor
//*******************
function GeneralEditor() {
	this.type = 0;
	this.numAns = 0;
	this.param = {};
	
	this.editorLayout = $("<div></div>", {class : "editor"}).hide();
	this.h4Title = $("<h4></h4>");//append test later
	this.editorLayout.append(this.h4Title);
	
	this.divInfo = $("<div></div>", { class : "ui-state-highlight ui-corner-all", style : "margin-top: 20px; padding: 0 .7em;"} );//append test later
	var spanInfoIcon = $("<span></span>", {class : "ui-icon ui-icon-info", style : "float: left; margin-right: .3em;"});
	this.divInfo.append(spanInfoIcon);
	this.editorLayout.append(this.divInfo);
	
	this.textQues = $("<textarea></textarea>", {style : "width : 97%; margin: 5px;",  rows : "7"});//append test later
	this.editorLayout.append(this.textQues);
	
	var tableAnsList = $("<table></table>", {class : "AnsList"}).append("<thead><tr></tr></thead>");
	this.col1Head = $("<th></th>");
	tableAnsList.children("thead:first tr:first").append(this.col1Head);
	this.col2Head = $("<th></th>");
	tableAnsList.children("thead:first tr:first").append(this.col2Head);
	
	this.bodyAnsList = $("<tbody></tbody>");
	tableAnsList.append(this.bodyAnsList);
	this.editorLayout.append(tableAnsList);		
	
	this.editorLayout.append("<hr />");
	
	this.labelPoint = $("<label></label>", {for : "textPoint"});
	this.editorLayout.append(this.labelPoint);
	this.textPoint = $("<input />", {type : "text", id : "textPoint"});
	this.editorLayout.append(this.textPoint);
	
	this.buttonAdd = $("<input />", {type : "button", class : "buttonAdd"});
	this.editorLayout.append(this.buttonAdd);
	
	var editor = this;
	$(this.buttonAdd).click(function() {
		editor.AddAns();
	});
}
GeneralEditor.prototype.SetText = function(param) {
	this.numAns = param.numAns;
	this.h4Title.text(param.title);
	this.divInfo.append(param.info);
	this.textQues.text(param.ques);
	this.col1Head.text(param.head1);
	this.col2Head.text(param.head2);
	this.labelPoint.text(param.pointtext);
	this.textPoint.val(param.point);
	this.buttonAdd.prop({value : param.add});
}
GeneralEditor.prototype.Hide = function() {
	this.editorLayout.hide("slide");
}
GeneralEditor.prototype.Show = function() {
	//this.parent.append(this.editorLayout);
	this.editorLayout.show("clip");
}
GeneralEditor.prototype.AddAns = function() {}
//*************************************************************************************************//

//*******************
//Class EditorType0
//*******************
function EditorType0(parent, param) {
	GeneralEditor.call(this);
	parent.append(this.editorLayout);
	this.type = 0;
	if(param == undefined) {
		this.h4Title.text("Single choice");
		this.divInfo.append("The question with various answers but just one of them is correct.");
		this.textQues.text("Question content...");
		this.col1Head.text("Answers");
		this.col2Head.text("Correct");
		this.labelPoint.text("Point : ");
		this.textPoint.val(1);
		this.buttonAdd.prop({value : "Add Answers"});
	} else {
		this.SetText(param);
	}
}
EditorType0.prototype = new GeneralEditor();
EditorType0.prototype.constructor = EditorType0;
EditorType0.prototype.AddAns = function() {
	this.bodyAnsList.append("<tr><td><input class=\"type0Ans\" type=\"text\" value=\"Answer " + (this.numAns + 1) +"...\" /></td>"
							+ "<td><input type=\"radio\" name=\"type0Radio\" value=\"" + (this.numAns) + "\" " + ((this.numAns == 0) ? "checked=\"checked\"" : "") + " /></td></tr>");
	this.numAns++;
	this.editorLayout.scrollTop(this.editorLayout.prop("scrollHeight"));
}
EditorType0.prototype.Render = function(param) {
	if(param == undefined) {
		param = new Object();
		param.type = this.type;
		param.ques = this.textQues.val();
		param.point = this.textPoint.val();
		param.correct = new Array($(":radio[name=type0Radio]:checked").val());
        param.numAns = this.numAns;
		param.ans = new Array();
		$("input.type0Ans").each(function() {
			param.ans.push($(this).val());
		});
		return param;
	} else {
		this.textQues.text(param.ques);
		this.textPoint.val(param.point);
		this.numAns = param.ans.length;
		for(i = 0; i < this.numAns; i++) {
			this.bodyAnsList.append("<tr><td><input class=\"type0Ans\" type=\"text\" value=\"" + param.ans[i] + "\" /></td>"
							+ "<td><input type=\"radio\" name=\"type0Radio\" value=\"" + i +"\" /></td></tr>");
		}
		$(":radio[name=type0Radio][value=" + param.correct[0] + "]").prop({checked : "checked"});
	}
	this.editorLayout.show("clip");
}
//*************************************************************************************************//


//*******************
//Class EditorType1
//*******************
function EditorType1(parent, param) {
	GeneralEditor.call(this);
	this.type = 1;
	parent.append(this.editorLayout);
	if(param == undefined) {
		this.h4Title.text("Multiple choices");
		this.divInfo.append("The question with various answers, some (or all) of them are correct.");
		this.textQues.text("Question content...");
		this.col1Head.text("Answers");
		this.col2Head.text("Correct");
		this.labelPoint.text("Point : ");
		this.textPoint.val(1);
		this.buttonAdd.prop({value : "Add Answers"});
	} else {
		this.SetText(param);
	}
}
EditorType1.prototype = new GeneralEditor();
EditorType1.prototype.constructor = EditorType1;
EditorType1.prototype.AddAns = function() {
	this.bodyAnsList.append("<tr><td><input class=\"type1Ans\" type=\"text\" value=\"Answer " + (this.numAns + 1) +"...\" /></td>"
							+ "<td><input type=\"checkbox\" class=\"type1CheckBox\" value=\"" + (this.numAns) +"\" /></td></tr>");
	this.numAns++;
	this.editorLayout.scrollTop(this.editorLayout.prop("scrollHeight"));
}
EditorType1.prototype.Render = function(param) {
	if(param == undefined) {
		param = new Object();
		param.type = this.type;
		param.ques = this.textQues.val();
		param.point = this.textPoint.val();
		param.correct = new Array();
		$("input.type1CheckBox:checked").each(function() {
			param.correct.push($(this).val());
		});
        param.numAns = this.numAns;
		param.ans = new Array();
		$("input.type1Ans").each(function() {
			param.ans.push($(this).val());
		});
		return param;
	} else {
		this.textQues.text(param.ques);
		this.textPoint.val(param.point);
		this.numAns = param.ans.length;
		for(i = 0; i < this.numAns; i++) {
			this.bodyAnsList.append("<tr><td><input class=\"type1Ans\" type=\"text\" value=\"" + param.ans[i] + "\" /></td>"
							+ "<td><input type=\"checkbox\" class=\"type1CheckBox\" value=\"" + i +"\" /></td></tr>");
		}
		for(i = 0; i < this.numAns; i++) {
			$("input.type1CheckBox[value=" + param.correct[i] + "]").prop({checked : "checked"});
		}
	}
	this.editorLayout.show("clip");
}
//*************************************************************************************************//


//*******************
//Class EditorType2
//*******************
function EditorType2(parent, param) {
	GeneralEditor.call(this);
	this.type = 2;
	parent.append(this.editorLayout);
	if(param == undefined) {
		this.h4Title.text("Two columns");
		this.divInfo.append("User need to short the phrase in one column to match with the other.");
		this.textQues.text("Question content...");
		this.col1Head.text("Phrase A");
		this.col2Head.text("Phrase B");
		this.labelPoint.text("Point : ");
		this.textPoint.val(1);
		this.buttonAdd.prop({value : "Add Answers"});
	} else {
		this.SetText(param);
	}
}
EditorType2.prototype = new GeneralEditor();
EditorType2.prototype.constructor = EditorType2;
EditorType2.prototype.AddAns = function() {
	this.bodyAnsList.append("<tr><td><input class=\"type2AnsA\" type=\"text\" value=\""+ this.col1Head.text() + (this.numAns + 1) +"...\" /></td>"
							+ "<td><input class=\"type2AnsB\" type=\"text\" value=\"" + this.col2Head.text() + (this.numAns + 1) +"\" /></td></tr>");
	this.numAns++;
	this.editorLayout.scrollTop(this.editorLayout.prop("scrollHeight"));
}
EditorType2.prototype.Render = function(param) {
	if(param == undefined) {
		param = new Object();
		param.type = this.type;
		param.ques = this.textQues.val();
		param.point = this.textPoint.val();
        param.numAns = this.numAns;

        param.correct = new Array();
        var tmpArr = new Array();
        for(i= 0;i < this.numAns; i++) {
            tmpArr.push(i.toString());
        }
        tmpArr.sort(function () { return 0.5 - Math.random() });

        param.ansA = new Array();
        $("input.type2AnsA").each(function() {
            param.ansA.push($(this).val());

		});

        param.ansB = new Array();
        for(i = 0; i < this.numAns; i++) {
            param.ansB.push($("input.type2AnsB").eq(tmpArr[i]).val());
            param.correct[tmpArr[i]] = i.toString();
        }
		return param;
	} else {
		this.textQues.text(param.ques);
		this.textPoint.val(param.point);
		this.numAns = param.correct.length;
        this.correct = param.correct;
		for(i = 0; i < this.numAns; i++) {
			this.bodyAnsList.append("<tr><td><input class=\"type2AnsA\" type=\"text\" value=\"" + param.ansA[i] + "\" /></td>"
							+ "<td><input class=\"type2AnsB\" type=\"text\" value=\"" + param.ansB[param.correct[i]] +"\" /></td></tr>");
		}
	}
	this.editorLayout.show("clip");
}
//*************************************************************************************************//


//*******************
//Class EditorType3
//*******************
function EditorType3(parent, param) {
	GeneralEditor.call(this);
	this.type = 3;
	parent.append(this.editorLayout);
	if(param == undefined) {
		this.h4Title.text("Gap Filling");
		this.divInfo.append("The question with various answers but just one of them is correct. Use *** to present the missing word.");
		this.textQues.text("Question content...");
		this.col1Head.text("Answers");
		this.col2Head.text("");
		this.labelPoint.text("Point : ");
		this.textPoint.val(1);
		this.buttonAdd.prop({value : "Add Answers"});
	} else {
		this.SetText(param);
	}
}
EditorType3.prototype = new GeneralEditor();
EditorType3.prototype.constructor = EditorType3;
EditorType3.prototype.AddAns = function() {
	var str = this.textQues.val();
	this.numAns = 0;
	this.bodyAnsList.empty();
	for(i = 0; i < str.length; i++) {
		if("***" == str.substr(i, 3)) {

			this.bodyAnsList.append("<tr><td><input class=\"type3Ans\" type=\"text\" value=\"Answer " + (this.numAns + 1) +"...\" /></td>"
									+ "<td></td></tr>");
			this.numAns++;
		}
	}
	this.editorLayout.scrollTop(this.editorLayout.prop("scrollHeight"));
}
EditorType3.prototype.Render = function(param) {
	if(param == undefined) {
		param = new Object();
		param.type = this.type;
		param.ques = this.textQues.val();
		param.point = this.textPoint.val();
		param.correct = new Array();
        param.numAns = this.numAns;
		$("input.type3Ans").each(function() {
			param.correct.push($(this).val());
		});
		return param;
	} else {
		this.textQues.text(param.ques);
		this.textPoint.val(param.point);
		this.numAns = param.correct.length;
		for(i = 0; i < this.numAns; i++) {
			this.bodyAnsList.append("<tr><td><input class=\"type3AnsA\" type=\"text\" value=\"" + param.correct[i] + "\" /></td>"
							+ "<td></td></tr>");
		}
	}
	this.editorLayout.show("clip");
}
//*************************************************************************************************//
//*******************
//Class EditorType4
//*******************
function EditorType4(parent, param) {
	GeneralEditor.call(this);
	this.type = 4;
	parent.append(this.editorLayout);
	this.buttonAdd.hide();
	this.numAns = 1;
    this.maxLabel = $('<label for="maxLen"></label>');
    this.editorLayout.append(this.maxLabel);
	this.max = $("<input />", {type : "text", value : 500, name : "maxLen"});
	this.editorLayout.append(this.max);
    this.minLabel = $('<label for="minLen"></label>');
    this.editorLayout.append(this.minLabel);
	this.min = $("<input />", {type : "text", value : 300, name : "minLen"});
	this.editorLayout.append(this.min);

	if(param == undefined) {
		this.h4Title.text("Essay");
		this.divInfo.append("After user has finish there work, we will send you the conent of this question, and you give the point.");
		this.textQues.text("Question content...");
		this.maxLabel.text("Max length:");
        this.minLabel.text("Min length:");
		this.labelPoint.text("Point : ");
		this.textPoint.val(1);
		this.buttonAdd.prop({value : "Add Answers"});
	} else {
		this.SetText(param);
	}
}
EditorType4.prototype = new GeneralEditor();
EditorType4.prototype.constructor = EditorType4;
EditorType4.prototype.Render = function(param) {
	if(param == undefined) {
		param = new Object();
		param.type = this.type;
		param.ques = this.textQues.val();
		param.point = this.textPoint.val();
        param.numAns = 0;
		param.correct = new Array(this.max.val(), this.min.val());
        param.max = param.correct[0];
        param.min = param.correct[1];
		return param;
	} else {
		this.textQues.text(param.ques);
		this.textPoint.val(param.point);
		this.max.val(param.correct[0]);
        this.min.val(param.correct[1]);
	}
	this.editorLayout.show("clip");
}